<template>
  <el-row style="margin-top: 10px" v-if="queryListData.action !== 'subiddir'">
    <el-col :span="18">
      <el-input placeholder="文件名称" v-model="queryListData.key" size="small" class="input-w" />
      <el-input placeholder="文件FID" v-model="queryListData.fid" size="small" class="input-w ml10" />
      <el-select placeholder="全部" v-model="queryListData.searchtype"  size="small" class="select-w ml10">
        <el-option v-for="item in fileTypeList" :key="item.typeid" :label="item.typename" :value="item.typeid">
        </el-option>
      </el-select>
      <el-button type="primary" size="small" @click="handlerFilter" class="ml10">
        <el-icon>
          <search />
        </el-icon>
        搜索
      </el-button>
    </el-col>
    <el-col :span="6"></el-col>
  </el-row>
</template>

<script>
  import {toRef, ref} from 'vue'
  import { Search } from "@element-plus/icons"
  export default {
    name: "FolderFilter",
    components: {Search},
    props: {
      queryList: {
        type: Object
      }
    },
    emits: ['handleFilter'],
    setup(props, context) {
      const queryListData = toRef(props, 'queryList')
      const fileTypeList = ref([
        {
          typeid: 0,
          typename: '目录'
        },
        {
          typeid: 1,
          typename: '文件'
        },
        {
          typeid: 2,
          typename: '全部'
        },
        {
          typeid: 3,
          typename: 'FID'
        },
      ])

      const handlerFilter = () => {
        queryListData.value.action = 'search'
        if (queryListData.value.fid) {
          queryListData.value.searchtype = 3
        }
        queryListData.value.type = queryListData.value.searchtype
        context.emit('handleFilter',queryListData.value)
      }

      return {
        queryListData,
        fileTypeList,
        handlerFilter
      }
    }
  }
</script>

<style scoped>

</style>
